<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="./../requriejs/bower_components/bootstrap/dist/css/bootstrap.css"/>
    <script src="./../requriejs/bower_components/jquery/dist/jquery.js"></script>
    <script src="./zepto_touch.js" ></script>
    <link rel="stylesheet" href="./Uploader.css"/>
    <script src="./../lib/consoleNoRequire.js"></script>
</head>
<body>
    <div id="imgWrapper">
        <img id='uploader' src="" />
        </img>
        <div class="spinner">
            <div class="double-bounce1"></div>
            <div class="double-bounce2"></div>
        </div>
        <span class="x-uploader-badge">
        </span>
        <a href="http://www.baidu.com">baidu.com</a>
    </div>
    <img id='testTouch' src="">
    </img>

    <img src="http://s1.bdstatic.com/r/www/cache/static/home/img/logo_c307d5cc.png" alt=""/>



    <script>
        $(function(){
            $('#imgWrapper').on('longTap',function(){
                alert('1');
            }) ;

            $('#uploader').on('click',function(){
                var self = this;
                $(self).css("visibility","hidden");
                $('.spinner').css("visibility","visible");
                $('.x-uploader-badge').show();
                var percent = 0;
                var percentInterval = setInterval(function(){
                     if(percent != 100) {
                         percent +=10;
                         $('.x-uploader-badge').text(percent + '%');
                     }else{
                        complete();
                        clearInterval(percentInterval);
                     }
                },200);
                function complete(){
                    $(self).css("visibility","visible");
                    $('.x-uploader-badge').text("0%");
                    $('.x-uploader-badge').hide();
                    $('.spinner').css("visibility","hidden");
                    $('#uploader').attr("src","http://gi2.md.alicdn.com/bao/uploaded/i2/T1DGyyFxNiXXXXXXXX_!!0-item_pic.jpg_480x480q50.jpg");
                }
            });

            $('#testTouch').on('touchstart',function(e){
                   console.log('testTouch touchStart');
            });

            $('#testTouch').on('touchmove',function(e){
                console.log('testTouch touchMove');
            });
            $('#testTouch').on('touchend',function(e){
                console.log('testTouch touchEnd');
             });
            $('#testTouch').on('touchcancel',function(e){
                console.log('testTouch touchCancel');
            });
        });
    </script>
</body>
</html>